<template>
    <div>
        <!-- {{cartList}} -->
        <table>
          <tr class="row">
            <td class="col-xs-3">图片</td>
            <td class="col-xs-3">名称</td>

            <td class="col-xs-2">数量</td>

            <td class="col-xs-2">单价</td>
            <td class="col-xs-2">总价</td>

          </tr>

        <tr
          v-for="(item,index) in cartList"
          :name="`${item.name} 单价:￥${item.unitPrice}`"
          :label="`合计: ${item.unitPrice*item.count}`"
          :key="index"
          class="row"
          >


            <td class="col-xs-3" style="padding:5px 0">
              <img v-if="item.thumb[0].filename" slot="icon" :src="'http://localhost:3000/'+item.thumb[0].filename" width="40" height="40">
            </td>
             <td class="col-xs-3">
               {{item.name}}
            </td>
            <td class="col-xs-3">
              <button class="btn btn-primary btn-xs"  @click="addToCart(item)">+</button>{{item.count}}<button class="btn btn-danger btn-xs"  @click="decreaseCart(item)">-</button>
            </td>
            <td class="col-xs-2">
              ￥{{item.unitPrice}}
            </td>
            <td class="col-xs-2">
              ￥{{item.unitPrice*item.count}}
            </td>
        </tr>

        </table>
        <div class="text-right" style="margin-top:10%">
          <button class="btn btn-primary">去结算</button>
        </div>
    </div>
</template>


<script>
  import {mapGetters,mapActions} from 'vuex';

  export default {
      data() {
          return {

          }
      },
      computed:{
          ...mapGetters(["cartList"])
      },
      methods:{
          ...mapActions(['addToCart','decreaseCart']),
      }
  }

</script>

<style scoped>
  tr{
    padding: 10px 0;
    border-bottom: 1px solid black;
  }
  td{
    padding: 0
  }
</style>

